<template>
  <div class="screening_hurdles_content">
    <div class="screening_hurdles">
      <div :class="{red:selectIndex === index}" v-for="(item,index) in selectList" @click="checkSelect(index)">
        <div>
          <div>
            <span>{{item.title}}</span>
            <span class="iconfont" :class="item.class"></span>
          </div>
        </div>
      </div>
    </div>
    <!--区域-->

    <div v-show="selectIndex === 0" class="screening_hurdles_select">
      <div>
        <div :class="{red:selectIndex === 0 && selectTwo === index}" @click="checkSelectTwo(index)"
             v-for="(item,index) in selectListTwo">{{item.title}}
        </div>
      </div>
      <div>
        <div v-if="cityNameArea.CODE.length !== 6" @click="checkSelectFour()" :class="{red:selectTwo === 0 && selectFour === ''}">
          不限
        </div>
        <div v-if="cityNameArea.CODE.length === 6 && selectTwo === 0" :class="{red:selectTwo === 0 && selectFour === cityNameArea.CODE}" @click="checkSelectFour(cityNameArea.CODE)">{{cityNameArea.region_name_c}}</div>
        <div v-if="selectTwo === 0 && cityNameArea.CODE.length !== 6" :class="{red:selectTwo === 0 && selectFour === item.CODE}"
             @click="checkSelectFour(item.CODE)" v-for="(item,index) in buildSel.area">{{item.region_name_c}}
        </div>

      </div>
    </div>
    <!--价格-->
    <div v-if="$route.name === 'TwoHouse'" v-show="selectIndex === 1" class="pay">
      <div>
        价格区间 （单位：万）
      </div>
      <div class="input">
        <div><input type="number" v-model="formData.price_min"></div>
        <div>一</div>
        <div><input type="number" v-model="formData.price_max"></div>
      </div>
      <div class="children_label">
        <div @click="changeLabelPay(item.value)" :class="{redHouse: payColor === item.value}"
             v-for="item in buildSel.price">{{item.title}}
        </div>
      </div>
      <div class="button">
        <div @click="noTermPay">不限条件</div>
        <div @click="goBuildList">确认</div>
      </div>
    </div>
    <div v-if="$route.name === 'LookBuild'" v-show="selectIndex === 1" class="pay">
      <div>
        价格区间 （单位：元）
      </div>
      <div class="input">
        <div><input type="number" v-model="formData.price_min"></div>
        <div>一</div>
        <div><input type="number" v-model="formData.price_max"></div>
      </div>
      <div class="children_label">
        <div @click="changeLabelPay(item.value)" :class="{redHouse: payColor === item.value}"
             v-for="item in buildSel.price">{{item.title}}
        </div>
      </div>
      <div class="button">
        <div @click="noTermPay">不限条件</div>
        <div @click="goBuildList">确认</div>
      </div>
    </div>
    <!--房型-->
    <div v-show="selectIndex === 2" class="house">
      <div>房型选择</div>
      <div class="change_house">
        <div @click="changeLabelHouse(item.value)" :class="{redHouse:formData.ht_room_num === item.value}"
             v-for="item in buildSel.ht_room_num">{{item.title}}
        </div>
      </div>
      <div class="button">
        <div @click="noTermHouse">不限条件</div>
        <div @click="goBuildList">确认</div>
      </div>
    </div>
    <!--更多-->
    <div v-show="selectIndex === 3" class="more">
      <div v-if="$route.name === 'LookBuild'">
        <div class="title">类型</div>
        <div class="label">
          <div :class="{redHouse:formData.type_is_apartment === 1}" @click="changeLabelNewHouse(1)">公寓</div>
          <div :class="{redHouse:formData.type_is_ocean === 1}" @click="changeLabelNewHouse(2)">洋房</div>
          <div :class="{redHouse:formData.type_is_villa === 1}" @click="changeLabelNewHouse(3)">别墅</div>
          <div :class="{redHouse:formData.type_is_shops === 1}" @click="changeLabelNewHouse(4)">商铺</div>
          <div :class="{redHouse:formData.type_is_office === 1}" @click="changeLabelNewHouse(5)">写字楼</div>
          <div :class="{redHouse:formData.type_is_hotel === 1}" @click="changeLabelNewHouse(6)">酒店</div>
          <div :class="{redHouse:formData.type_is_housing === 1}" @click="changeLabelNewHouse(7)">住宅</div>
        </div>
      </div>
      <!--<div v-if="buildSel.houseType">-->
      <div v-if="buildSel.houseType">
        <div class="title">房型</div>
        <div class="label">
          <div :class="{redHouse:formData.type_id === item.id}" @click="changeHouseType(item.id)"
               v-for="item in buildSel.houseType">{{item.title}}
          </div>
        </div>
      </div>
      <div v-if="buildSel.renovation">
        <div class="title">装修</div>
        <div class="label">
          <div :class="{redHouse:formData.renovation_id === item.id}" @click="changeLabelRen(item.id)"
               v-for="item in buildSel.renovation">{{item.title}}
          </div>
        </div>
      </div>
      <div v-if="buildSel.floorPosition">
        <div class="title">楼层位置</div>
        <div class="label">
          <div :class="{redHouse:loucengColor === item.params}" @click="changeLouCeng(item.params)"
               v-for="item in buildSel.floorPosition">{{item.title}}
          </div>
        </div>
      </div>
      <div v-if="buildSel.HouseOrientation">
        <div class="title">朝向</div>
        <div class="label">
          <div :class="{redHouse:formData.orientation_id === item.id}" @click="changeOrientation(item.id)"
               v-for="item in buildSel.HouseOrientation">{{item.title}}
          </div>
        </div>
      </div>
      <div v-if="buildSel.houseAge">
        <div class="title">房龄</div>
        <div class="label">
          <div :class="{redHouse:yearsColor === item.params}" @click="changeHouseYear(item.params)"
               v-for="item in buildSel.houseAge">{{item.title}}
          </div>
        </div>
      </div>
      <!--<div v-if="buildSel.HouseOrientation">-->
      <div v-if="selectIndex === 3">
        <div class="title">开发商</div>
        <div class="label">
          <div :class="{redHouse:formData.developer === item}" @click="changeDevelopers(item)"
               v-for="item in developersArray">{{item}}
          </div>
        </div>
      </div>
      <div class="button">
        <div @click="noTermType">不限条件</div>
        <div @click="goBuildList">确认</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getCityName} from '../../assets/js/cache';

  export default {
    props: {
      buildSel: {
        type: Object
      },
      formData: {
        type: Object
      },
      getBuildList: {
        type: Function
      }

    },
    name: 'ScreeningHurdles',
    data() {
      return {
        cityNameArea:{},
        type_is_apartment: '',//公寓
        type_is_ocean: '',//洋房
        type_is_villa: '',//别墅
        type_is_shops: '',//商铺
        type_is_office: '',//写字楼
        type_is_hotel: '',//酒店
        type_is_housing: '',//住宅
        selectList: [
          {title: '区域', class: 'icon-xiala'},
          {title: '价格', class: 'icon-xiala'},
          {title: '房型', class: 'icon-xiala'},
          {title: '更多', class: 'icon-xiala'}
        ],
        selectListTwo: [
          // {title: '附近'},
          {title: '区域'}
        ],
        selectIndex: -1,
        selectTwo: 0,
        selectThree: 0,
        selectFour: '',
        arrPay: [],
        payColor: '',
        yearsColor: '',
        arrYears: [],
        developersColor: '',
        loucengColor: '',
        arrLouceng: [],
        developersArray: ['碧桂园', '融创', '富力', '鲁能', '万科']
      }
    },
    computed: {
      getHouseArea() {
        return this.$store.getters.getHouseArea;
      },
      getHousePayMin() {
        return this.$store.getters.getHousePayMin;
      },
      getHousePayMax() {
        return this.$store.getters.getHousePayMax;
      },
      getHouseType() {
        return this.$store.getters.getHouseType;
      },
      getHouseDevelopers() {
        return this.$store.getters.getHouseDevelopers;
      },
      getHouseHuxing() {
        return this.$store.getters.getHouseHuxing;
      },
      getHouseAreaNew() {
        return this.$store.getters.getHouseAreaNew;
      },
      getHousePayMinNew() {
        return this.$store.getters.getHousePayMinNew;
      },
      getHousePayMaxNew() {
        return this.$store.getters.getHousePayMaxNew;
      },
      getHouseTypeNew() {
        return this.$store.getters.getHouseTypeNew;
      },
      getHouseDevelopersNew() {
        return this.$store.getters.getHouseDevelopersNew;
      },
      getHouseHuxingNew() {
        return this.$store.getters.getHouseHuxingNew;
      },
      getFindRouterName() {
        return this.$store.getters.getFindRouterName;
      }
    },
    watch: {
      '$route'(to, from) {
        if (from.name === 'Index') {
          // this.getNewData();
          // this.getBuildList();
          this.cityNameArea = getCityName();
          this.selectIndex = -1;
          console.log(this.$route.name);
          if(this.$route.name === 'LookBuild'){
            this.getNewHouseData();
          }else{
            this.getNewData();
          }
        }
      }
    },
    created() {
      this.cityNameArea = getCityName();
      console.log(this.$route.name);
      if(this.$route.name === 'LookBuild'){
        this.getNewHouseData();
      }else{
        this.getNewData();
      }

    },
    methods: {
      getNewData() {
        this.selectFour = this.getHouseArea;
        this.formData.area_code = this.getHouseArea;
        if (this.getHousePayMax) {
          this.formData.price_min = this.getHousePayMin;
          this.formData.price_max = this.getHousePayMax;
          this.payColor = this.getHousePayMin + '-' + this.getHousePayMax;
        }
        else {
          this.formData.price_min = this.getHousePayMin;
          this.payColor = this.getHousePayMin
        }
        console.log(this.getHousePayMax);
        this.formData.sell_max = this.getHousePayMax;
        this.formData.type_id = this.getHouseType;
        switch (this.getHouseType) {
          case 1:
            this.formData.type_is_apartment = 1;
            break;
          case 2:
            this.formData.type_is_ocean = 1;
            break;
          case 3:
            this.formData.type_is_villa = 1;
            break;
          case 4:
            this.formData.type_is_shops = 1;
            break;
          case 5:
            this.formData.type_is_office = 1;
            break;
          case 6:
            this.formData.type_is_hotel = 1;
            break;
          case 7:
            this.formData.type_is_housing = 1;
            break;
        }

        this.formData.developer = this.getHouseDevelopers;
        this.formData.ht_room_num = this.getHouseHuxing;
      },
      getNewHouseData(){
        this.selectFour = this.getHouseAreaNew;
        this.formData.area_code = this.getHouseAreaNew;
        if (this.getHousePayMaxNew) {
          this.formData.price_min = this.getHousePayMinNew;
          this.formData.price_max = this.getHousePayMaxNew;
          this.payColor = this.getHousePayMinNew + '-' + this.getHousePayMaxNew;
        }
        else {
          this.formData.price_min = this.getHousePayMinNew;
          this.payColor = this.getHousePayMinNew
        }
        console.log(this.getHousePayMaxNew);
        this.formData.sell_max = this.getHousePayMaxNew;
        this.formData.type_id = this.getHouseTypeNew;
        switch (this.getHouseTypeNew) {
          case 1:
            this.formData.type_is_apartment = 1;
            break;
          case 2:
            this.formData.type_is_ocean = 1;
            break;
          case 3:
            this.formData.type_is_villa = 1;
            break;
          case 4:
            this.formData.type_is_shops = 1;
            break;
          case 5:
            this.formData.type_is_office = 1;
            break;
          case 6:
            this.formData.type_is_hotel = 1;
            break;
          case 7:
            this.formData.type_is_housing = 1;
            break;
        }

        this.formData.developer = this.getHouseDevelopersNew;
        this.formData.ht_room_num = this.getHouseHuxingNew;
      },
      //区域,价格,房型,更多       切换
      checkSelect(index) {
        let that = this;
        if (that.selectIndex === -1) {
          that.selectIndex = index;
        } else if (that.selectIndex === index) {
          that.selectIndex = -1;
        } else {
          that.selectIndex = index;
        }
        // console.log(index);
        // console.log(that.selectIndex);
      },
      //朝向切换
      changeOrientation(id) {
        if (this.formData.orientation_id === id) {
          this.formData.orientation_id = '';
        } else {
          this.formData.orientation_id = id;
        }

      },
      // 楼层切换
      changeLouCeng(params) {
        console.log(params);
        console.log(this.loucengColor, '----');
        if (this.loucengColor === params) {
          this.loucengColor = '';
          this.formData.floor_id_min = '';
          this.formData.floor_id_max = '';
        } else {
          if (params === 1) {
            this.formData.floor_id_dc = params;
          } else {
            this.loucengColor = params;
            console.log(params);
            this.arrLouceng = params.split('-');
            console.log(this.arrLouceng);
            this.formData.floor_id_min = this.arrLouceng[0];
            this.formData.floor_id_max = this.arrLouceng[1];
          }
        }

      },
      // 开发商切换
      changeDevelopers(params) {
        if (this.formData.developer === params) {
          this.formData.developer = '';
        } else {
          this.formData.developer = params;
        }

      },
      // 房龄切换
      changeHouseYear(params) {
        console.log(params);
        // this.selectIndex = -1;
        if (this.yearsColor === params) {
          this.yearsColor = '';
          this.formData.building_year_min = '';
          this.formData.building_year_max = '';
        } else {
          this.yearsColor = params;
          console.log(params);
          this.arrYears = params.split('-');
          console.log(this.arrYears);
          this.formData.building_year_min = this.arrYears[0];
          this.formData.building_year_max = this.arrYears[1];
        }

      },
      //房型切换
      changeHouseType(id) {
        if (this.formData.type_id === id) {
          this.formData.type_id = '';
          this.$store.commit('setHouseType',this.formData.type_id);
        } else {
          this.formData.type_id = id;
          this.$store.commit('setHouseType',this.formData.type_id);
        }

      },
      //附近,区域               切换
      checkSelectTwo(index) {
        this.selectTwo = index;
        console.log(index)
      },
      //子类最终选择
      // checkSelectThree(index) {
      //   this.selectThree = index;
      //   // this.selectIndex = -1;
      // },
      //区域编号
      checkSelectFour(code) {
        this.selectFour = code;
        console.log(code);
        if (code === undefined) {
          this.selectFour = '';
          this.formData.area_code = ''
        } else {
          this.formData.area_code = code.substr(0,6);
          console.log(this.formData.area_code)
        }
        this.goBuildList();
        if (this.$route.name === 'LookBuild'){
          this.$store.commit('setHouseAreaNew',this.formData.area_code)
        } else{
          this.$store.commit('setHouseArea',this.formData.area_code)
        }
        this.selectIndex = -1;
        console.log(this.formData)
      },
      //价格区间
      changeLabelPay(value) {
        // this.selectIndex = -1;
        this.payColor = value;
        console.log(value);
        this.arrPay = value.split('-');
        console.log(this.arrPay);
        this.formData.price_min = this.arrPay[0];
        this.formData.price_max = this.arrPay[1];
        if (this.$route.name === 'LookBuild'){
          this.$store.commit('setHousePayMinNew',this.formData.price_min);
          this.$store.commit('setHousePayMaxNew',this.formData.price_max);

        } else{
          this.$store.commit('setHousePayMin',this.formData.price_min);
          this.$store.commit('setHousePayMax',this.formData.price_max);
        }
      },
      //房型
      changeLabelHouse(value) {
        // this.selectIndex = -1;
        this.formData.ht_room_num = value;
        if (this.$route.name === 'LookBuild'){
          this.$store.commit('setHouseHuxingNew',this.formData.ht_room_num);
        } else{
          this.$store.commit('setHouseHuxing',this.formData.ht_room_num);
        }
        console.log(value)
      },
      //装修
      changeLabelRen(id) {
        if (this.formData.renovation_id === id) {
          this.formData.renovation_id = ''
        } else {
          this.formData.renovation_id = id;
        }

        console.log(id);
      },
      //楼盘类型
      changeLabelNewHouse(id) {
        switch (id) {
          case 1:
            this.formData.type_is_apartment = 1;
            // this.$store.commit('setHouseTypeNew',1);
            break;
          case 2:
            this.formData.type_is_ocean = 1;
            break;
          case 3:
            this.formData.type_is_villa = 1;
            break;
          case 4:
            this.formData.type_is_shops = 1;
            break;
          case 5:
            this.formData.type_is_office = 1;
            break;
          case 6:
            this.formData.type_is_hotel = 1;
            break;
          case 7:
            this.formData.type_is_housing = 1;
            break;
        }

        // this.selectIndex = -1;
      },
      //确认  请求数据
      goBuildList() {
        console.log(this.formData);
        this.getBuildList();
        this.selectIndex = -1;
      },
      //不限条件 价格
      noTermPay() {
        this.formData.price_min = '';
        this.formData.price_max = '';
        // this.goBuildList();
      },
      //不限条件 房型
      noTermHouse() {
        this.formData.ht_room_num = '';
        // this.goBuildList();
      },
      //不限条件 类型 装修
      noTermType() {
        this.formData.renovation_id = '';
        this.formData.type_is_apartment = '';//公寓
        this.formData.type_is_ocean = '';//洋房
        this.formData.type_is_villa = '';//别墅
        this.formData.type_is_shops = '';//商铺
        this.formData.type_is_office = '';//写字楼
        this.formData.type_is_hotel = '';//酒店
        this.formData.type_is_housing = '';//住宅
        this.formData.floor_id_min = '';//楼层
        this.formData.floor_id_max = '';
        this.loucengColor = '';
        this.formData.developer = '';//开发商
        this.formData.building_year_min = '';//房龄
        this.formData.building_year_max = '';//房龄
        this.yearsColor = '';
        this.formData.type_id = '';//室数
        this.formData.orientation_id = '';//朝向
        this.formData.floor_id_dc = '';//顶层

        // this.goBuildList();
      }
    }
  }
</script>

<style scoped>
  .screening_hurdles_content {
    position: relative;
    z-index: 99;
  }

  .screening_hurdles_content .screening_hurdles {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    height: 30px;
    background-color: #f8f8f8;
    font-size: 0.8rem;
    line-height: 30px;
  }

  .screening_hurdles_content .screening_hurdles_select {
    position: absolute;
    background-color: #f8f8f8;
    font-size: 0.8rem;
    /*padding: 10px;*/
    display: flex;
    width: 100%;
    border-top: 1px solid #eee;
  }

  .screening_hurdles_content .screening_hurdles_select > div {
    width: 50%;
    padding: 10px;
  }

  .screening_hurdles_content .screening_hurdles_select > div:nth-child(1) {
    background-color: #ffffff;
  }

  .screening_hurdles_content .screening_hurdles_select > div:nth-child(2) {
    /*padding-left: 10px;*/
  }

  .screening_hurdles_content .screening_hurdles_select > div > div {
    height: 30px;
    line-height: 30px;
    /*border-top: 1px solid #eee;*/
  }

  .screening_hurdles_content .pay {
    position: absolute;
    background-color: #ffffff;
  }

  .screening_hurdles_content .pay > div {
    padding: 10px;
    font-size: 0.8rem;
  }

  .screening_hurdles_content .pay .input {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }

  .screening_hurdles_content .pay .input > div {
    border: 1px solid #999;
    border-radius: 5px;
    padding: 5px;
  }

  .screening_hurdles_content .pay .input input {
    width: 90%;
    height: 1.5rem;
    border: none;
    outline: 0;

  }

  .screening_hurdles_content .pay .input > div:nth-child(2) {
    margin: 0 10px;
    border: none;
  }

  .screening_hurdles_content .pay .children_label {
    display: flex;
    /*justify-content: space-between;*/
    flex-wrap: wrap;

  }

  .screening_hurdles_content .pay .children_label > div {
    padding: 2px;
    background-color: #eee;
    margin: 10px;
    border-radius: 5px;

    /*color: #999;*/
  }

  .screening_hurdles_content .pay .button {
    display: flex;
    padding: 0;
  }

  .screening_hurdles_content .pay .button > div {
    width: 50%;
    padding: 10px;
    height: 20px;
    line-height: 20px;
    text-align: center;
  }

  .screening_hurdles_content .pay .button > div:nth-child(1) {
    background-color: #eee;
    color: #999;
  }

  .screening_hurdles_content .pay .button > div:nth-child(2) {
    background-color: #e6191e;
    color: #ffffff;
  }

  .screening_hurdles_content .house {
    /*padding: 10px;*/
    font-size: 0.8rem;
    position: absolute;
    background-color: #ffffff;
  }

  .screening_hurdles_content .house > div:nth-child(1) {
    padding: 10px 10px 0 10px;
  }

  .screening_hurdles_content .house > div:nth-child(2) {
    padding: 5px;
  }

  .screening_hurdles_content .house .change_house {
    display: flex;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: #999;
    margin: 5px 0;
  }

  .screening_hurdles_content .house .change_house > div {
    padding: 5px 1.5rem;
    background-color: #eee;
    border-radius: 5px;
    margin: 5px;
  }

  .redHouse {
    border: 1px solid;
    color: red !important;
    border-color: #e6191e !important;
  }

  .screening_hurdles_content .house .button {
    display: flex;
    padding: 0;
  }

  .screening_hurdles_content .house .button > div {
    width: 50%;
    padding: 10px;
    height: 20px;
    line-height: 20px;
    text-align: center;
  }

  .screening_hurdles_content .house .button > div:nth-child(1) {
    background-color: #eee;
    color: #999;
  }

  .screening_hurdles_content .house .button > div:nth-child(2) {
    background-color: #e6191e;
    color: #ffffff;
  }

  .screening_hurdles_content .more {
    width: 100%;
    font-size: 0.8rem;
    position: absolute;
    background-color: #ffffff;
  }

  .screening_hurdles_content .more .title {
    padding: 10px;
  }

  .screening_hurdles_content .more .label {
    padding: 0 10px;
    display: flex;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
    color: #999;

  }

  .screening_hurdles_content .more .label > div {
    padding: 5px 10px;
    background-color: #eee;
    margin: 5px;
    border-radius: 5px;
  }

  .screening_hurdles_content .more .button {
    display: flex;
    padding: 0;
  }

  .screening_hurdles_content .more .button > div {
    width: 50%;
    padding: 10px;
    height: 20px;
    line-height: 20px;
    text-align: center;
  }

  .screening_hurdles_content .more .button > div:nth-child(1) {
    background-color: #eee;
    color: #999;
  }

  .screening_hurdles_content .more .button > div:nth-child(2) {
    background-color: #e6191e;
    color: #ffffff;
  }

  .red {
    color: red !important;
  }

</style>
